import {designComponent, onBeforeUnmount, PropType} from "plain-design-composition"
import {Tab} from "plain-micro-application"

import {NavigatorEventHandler} from "@/micro/nav/utils/micro.navigator.event";
import {MicroNavigatorTabProvider} from "@/micro/nav/utils/micro.navigator.tab.provider";
import {MicroNavigatorPage} from "@/micro/nav/components/MicroNavigatorPage";
import React from "react";

export const MicroNavigatorTab = designComponent({
    props: {
        tab: {type: Object as PropType<Tab>, required: true,},
    },
    setup({props}) {

        MicroNavigatorTabProvider.provide(props.tab)

        onBeforeUnmount(() => {NavigatorEventHandler.onBeforeUnmount.tab(props.tab)})

        return () => props.tab.pages.map((page, index) => (
            <MicroNavigatorPage key={page.id} page={page} tab={props.tab} show={props.tab.show && index === props.tab.pages.length - 1}/>
        ))
    },
})